Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@solid-devtools/debugger
Advanced tools
Debugger of the Solid's reactivity graph — a cornerstone of all solid-devtools.
A runtime package, used to get information and track changes of the Solid's reactivity graph. It's a cornerstone of the rest of the packages.
npm i @solid-devtools/debugger
# or
yarn add @solid-devtools/debugger
# or
pnpm add @solid-devtools/debugger
In Solid version 1.4.5
, a _$afterCreateRoot
dev hook was added to allow for automatic attaching of the debugger.
That means that you can use the debugger in your Solid apps without having to manually attach it to every root or the reactive graph in your application. To enable automatic attaching, you need to add the following code to the entry point of your app:
If you use solid-devtools
package, this is already handled for you!
import { attachDebugger, makeCreateRootListener } from "@solid-devtools/debugger"
makeCreateRootListener(root => attachDebugger(root))
If you don't want to automatically attach debugger, it can be done manually. It will give you the freedom to attach debugger to any root you choose.
To do so you need to import the debugger package and use one of the two primitives:
attachDebugger
This is a hook that will attach the debugger to the reactive owner of the scope it was used under. For example you might want to use it in you <App>
component, or directly in the render
function. It can be used in many places at once without any issues.
import { render } from "solid-js/web"
import { attachDebugger } from "@solid-devtools/debugger"
render(() => {
attachDebugger()
return <App />
}, document.getElementById("root")!)
// or inside the App component:
function App() {
attachDebugger()
return <>...</>
}
Debugger
The debugger component works exactly like attachDebugger
, but it may be more convenient to use at times.
import { render } from "solid-js/web"
import { Debugger } from "@solid-devtools/debugger"
render(
() => (
<Debugger>
<App />
</Debugger>
),
document.getElementById("root")!,
)
If you choose to attach debugger manually, you have to do that with every sub root, even if it is theoretically a part of existing and attached tree. This is because Solid doesn't attach roots created with createRoot
to it's detached parent, so the debugger has no way of reaching it. To reattach this root back to the tree tracked by the debugger — simply put another attachDebugger
call inside it.
This also will be necessary when using components that use createRoot
internally, like <For>
, <Index>
or <Suspense>
.
Note This applies only when you are attaching roots manually. For automatic attaching, this is already handled.
<For each={list()}>
{item => (
<Debugger>
<ItemComponent title={item} />
</Debugger>
)}
<For>
// or call attachDebugger inside ItemComponent
function ItemComponent(props){
attachDebugger()
return <li>props.title</li>
}
See CHANGELOG.md.
FAQs
Debugger of the Solid's reactivity graph — a cornerstone of all solid-devtools.
The npm package @solid-devtools/debugger receives a total of 9,636 weekly downloads. As such, @solid-devtools/debugger popularity was classified as popular.
We found that @solid-devtools/debugger demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.